<template>
  <div class="homeLogin">
    <el-row :span="24" class="login-main">
      <el-form :rules="rules" :ref="formRefs" :model="user"  class="login-form">
         <el-form-item prop="passWord">
          <el-input placeholder="请输入原密码" type="password" v-model="user.passWord"></el-input>
        </el-form-item>
        <el-form-item prop="newPassWord">
          <el-input placeholder="请输入新密码" type="password" v-model="user.newPassWord"></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassWord">
          <el-input placeholder="请再次确认新密码" type="password" v-model="user.confirmPassWord"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row :span="24">
        <el-col :span="4">手机号</el-col>
        <el-col :span="20" style="text-align:left;"><span>{{phonenum}}</span></el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="4">验证码</el-col>
        <el-col :span="12"><el-input v-model="user.veriCode" placeholder="请输入验证码"></el-input></el-col>
         <el-col :span="8"> <el-button class="codeBtn" type="success" :disabled="codestatus" @click="getCode">{{codeText}}</el-button></el-col>
      </el-row>
        </el-form-item>
         <el-form-item>
           <el-button class="loginbtn" @click.prevent="confirm">确定</el-button>
         </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  beforeCreate () {
    this.formRefs = 'changePsWordForm'
    let phonenum = this.$store.state.user.phone
    this.phonenum = phonenum.replace(phonenum.substr(3, 4), '****')
  },
  data () {
    let checkconfirm = (rule, value, cb) => {
      if (value) {
        if (value !== this.user.newPassWord) {
          cb(new Error('两次密码输入不一致，请重新输入'))
        } else {
          cb()
        }
      } else {
        cb()
      }
    }
    return {
      projectBaseUrl: 'http://218.104.153.143:8089',
      rules: {
        passWord: [
            { required: true, message: '请输入原密码', trigger: 'blur' },
            { message: '', trigger: 'change' }
        ],
        newPassWord: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { message: '', trigger: 'change' }
        ],
        confirmPassWord: [
            { required: true, message: '请再次确认新密码', trigger: 'blur' },
            { validator: checkconfirm, trigger: 'blur' },
            { message: '', trigger: 'change' }
        ]
      },
      user: {
        passWord: '',
        newPassWord: '',
        confirmPassWord: '',
        veriCode: '',
        phone: ''
      },
      codeText: '获取验证码',
      codestatus: false,
      verifyObj: {}
    }
  },
  methods: {
    confirm () {
      let that = this
      this.$refs[this.formRefs].validate((valid) => {
        if (valid) {
          that.user.token = this.$store.state.token
          that.user.phone = this.$store.state.user.phone
          that.$http.post(this.projectBaseUrl + '/numberone-auth/busiUser/modifyPassword.shtml', that.user, {
            emulateJSON: true
          }).then((data) => {
            if (data.body.success === '操作成功') {
              that.$message({
                message: '修改密码成功',
                type: 'success',
                duration: 1000,
                showClose: false
              })
              this.$router.push('/user')
            } else {
              that.$message({
                message: data.body.error,
                type: 'error',
                duration: 1000,
                showClose: false
              })
            }
          }, (ne) => {
            that.$message({
              message: '网络错误',
              type: 'error',
              duration: 1000,
              showClose: false
            })
          })
        } else {
          return false
        }
      })
    },
    getCode () {
      let sed = 60
      let timer = setInterval(() => {
        if (sed > 1) {
          sed--
          this.codeText = sed + 's'
          this.codestatus = true
        } else {
          clearInterval(timer)
          this.codeText = '获取验证码'
          sed = 60
          this.codestatus = false
        }
      }, 1000)
      this.code()
    },
    code () {
      // 获取验证码
      this.verifyObj.phone = this.$store.state.user.phone
      this.$http.get('http://218.104.153.143:8089/numberone-auth/busiUser/getVeriCode.shtml', {
        params: this.verifyObj}, { // 头文件及JSON格式设定
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          emulateJSON: true
        }).then((data) => { // 数据获取成功
          this.$message({
            message: '验证码获取成功',
            type: 'success',
            duration: 1000,
            showClose: false
          })
        }, (ne) => { // 数据获取失败
          this.$message({
            message: '验证码获取失败',
            type: 'error',
            duration: 1000,
            showClose: false
          })
        }
      )
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
  .homeLogin{
    font-size: 12px;
    .el-form-item{
      margin:0
    }
    .login-head{
      color:#fff;
      div{
        height: 201px;
        background: url('../../assets/imgs/bg.png') center center no-repeat;
        background-size: cover;
        p{
          font-size: 14px;
        }
        p:first-of-type{
          font:700 16px/80px "微软雅黑";
          margin-bottom: 15px;
        }
        span{
          float: right;
          font-size: 14px;
          font-weight: 700;
          position: absolute;
          right: 10px;
          top: 30px;
          display: inline-block;
          width: 50px;
          line-height: 20px;
        }
        .registerRow {
          display: flex;
          .register {
            display: inline-block;
            width: 50px;
            font-weight: 700;
            font-size: 14px;
            position: absolute;
            right: 10px;
          }
        }
      }
    }
    .login-main{
      margin-top: 10px;
      .el-form-item__error{
        left: 10%
      }
      input{
        width: 90%;
        height: 44px;
        border-radius: 20px;
        text-indent: 34px;
        margin-bottom: 20px;
      }
      .icon-num{
            font-size: 20px;
            color: #bfcbd9;
            position: absolute;
            top: 12px;
            left: 36px;
      }
      .icon-code{
          font-size: 29px;
          color: #bfcbd9;
          position: absolute;
          top: 7px;
          left: 39px;
      }
      .codebtn{
        color:#fff;
        width: 25%;
        height: 44px;
        background-color: #499E41;
        border-radius: 0 20px 20px 0;
        margin-left: -20px;
        border: none;
      }
      .code-input{
        width: 75%;
        float: left;
        margin-left: 5px;
      }
      .code-input input{
        width: 100%;
      }
      .loginbtn{
        width: 90%;
        height: 44px;
        background-color: #499E41;
        margin-top: 30px;
        border-radius: 20px;
        color:#fff;
        font-size: 16px;
      }
    }
  }
</style>
